<template>
	<div class="riskOverview">
		<header-Name :name="headerTitle"></header-Name>
		<div class="content">
			<div class="riskSignal">
				<div class="left">
					<img style="width: 40px;height: 40px;"
						:src="require('@/assets/img/work/custInfo/riskOverviewBgroundSigle.png')" class="img" alt="" />
					<div class="self">
						<span class="text">自身风险信号数：</span>
						<span class="number">82</span>
					</div>
					<div class="time">
						<span class="text">更新时间：</span>
						<span class="number">2022-10-14</span>
					</div>
				</div>
				<div class="right">
					<span>
						自身风险信号为<span class="span">82</span>个,
						特大风险信号为<span class="span">0</span>个,
						预警风险信号为<span class="span">1</span>个,
						关注风险信号为<span class="span">1</span>个,
						提示风险信号为<span class="span">80</span>个;
						涉及关联风险的数量为<span class="span">2226</span>个,
						其中涉及特大风险的为<span class="span">5</span>个,
						涉及预警风险的为<span class="span">13</span>个,
						涉及关注风险的为<span class="span">27</span>个,
						涉及提示风险的为<span class="span">2131</span>个。
					</span>
				</div>
			</div>
			<div class="detail">
				<el-row>
					<el-col :span="8">
						<div class="selfRisk detailItem">
							<div class="title">
								<div class="blueLine"></div>
								<div class="name">自身风险</div>
								<img 
								  :src="require('@/assets/img/work/custInfo/riskOverview_sigh.png')" 
								  alt=""
								/>
								<span>共累计<span class="spanYellow"> {{selfRisk.total}} </span>条风险</span>
							</div>
							<div class="riskList" v-for="item in selfRisk.list" :key="item.id">
								<div class="listTitle">
									<img
									  :src="item.img" 
									  alt=""
									/>
									<div class="text">{{item.name}}</div>
									<div class="dot" :style="{background:item.color}"></div>
									<div class="number">{{item.riskNum}}</div> 
								</div>
								<div class="listLabel">
									<div  :style="{background:item.background,color:item.color}" class="labelItem" v-for="list in item.labelList">{{list}}</div> 
								</div>
								<div class="explain" v-show="item.labelList.length >0">
									<img
									  :src="require('@/assets/img/work/custInfo/riskOverview_sigh.png')" 
									  alt=""
									/>
									<span>以上标签包含<span class="number">{{item.labelNum}}</span>条风险</span>
									
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="relationEntity detailItem">
							<div class="title">
								<div class="blueLine"></div>
								<div class="name">关联实体</div>
								<img 
								  :src="require('@/assets/img/work/custInfo/riskOverview_sigh.png')" 
								  alt=""
								/>
								<span>共累计<span class="spanBlack"> 1111 </span>条,其中风险实体<span class="spanYellow"> 81 </span>个</span>
							</div>
							<div class="chartName">各类型风险实体与关联实体占比图</div>
							<div class="chartTitle">
								<div class="chartTItem" v-for="list in chartTitlelist">
									<div class="dot"></div>
									<div>{{list}}</div>
								</div> 
							</div>
							<div class="mastery" id="mastery"></div>
						</div>
					</el-col>
					<el-col :span="8"> 
						<div class="relationRisk detailItem">
							<div class="title">
								<div class="blueLine"></div>
								<div class="name">关联风险</div>
								<img 
								  :src="require('@/assets/img/work/custInfo/riskOverview_sigh.png')" 
								  alt=""
								/>
								<span>共累计<span class="spanYellow"> {{relationRisk.total}} </span>条风险</span>
							</div>
							<div class="riskList" v-for="item in relationRisk.list" :key="item.id">
								<div class="listTitle">
									<img
									  :src="item.img" 
									  alt=""
									/>
									<div class="text">{{item.name}}</div>
									<div class="dot" :style="{background:item.color}"></div>
									<div class="number">{{item.riskNum}}</div> 
								</div>
								<div class="listLabel">
									<div  :style="{background:item.background,color:item.color}" class="labelItem" v-for="list in item.labelList">{{list}}</div> 
								</div>
								<div class="explain" v-show="item.labelList.length >0">
									<img
									  :src="require('@/assets/img/work/custInfo/riskOverview_sigh.png')" 
									  alt=""
									/>
									<span>以上标签包含<span class="number">{{item.labelNum}}</span>条风险</span>
									
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import HeaderName from './headerName.vue';
	import echarts from 'echarts'
	export default {
		name: 'riskOverview', //风险总览
		components: {
			HeaderName
		},
		data() {
			return {
				headerTitle: "风险总览",
				chartTitlelist:['法人风险实体', '股东风险实体', '子公司风险实体', '关联人', '自定义关联企业'],
				selfRisk:{
					total:82,
					list:[{
						id:101,
						img:require('@/assets/img/work/custInfo/riskOverview_iconRisk1.png'),
						name:"特大风险",
						riskNum:0,
						labelNum:0,
						labelList:[],
						color:"#FE6A41 ",
						background:"rgba(254,106,65,0.1)"
						
					},{
						id:102,
						img:require('@/assets/img/work/custInfo/riskOverview_iconRisk2.png'),
						name:"预警风险",
						riskNum:2,
						labelNum:12,
						labelList:["经营异常"],
						color:"#F7B500 ",
						background:"rgba(247,181,0,0.1)"
						
					},{
						id:103,
						img:require('@/assets/img/work/custInfo/riskOverview_iconRisk3.png'),
						name:"关注风险",
						riskNum:2,
						labelNum:2,
						labelList:["裁判文书"],
						color:"#0080FF",
						background:"rgba(0,128,255,0.1)"
						
					},{
						id:104,
						img:require('@/assets/img/work/custInfo/riskOverview_iconRisk4.png'),
						name:"提示风险",
						riskNum:4,
						labelNum:90,
						labelList:["裁判文书","多次开庭","经营异常","风险投资","注册资本变更","经营范围变更"],
						color:"#00C6CC",
						background:"rgba(0,198,204,0.1)"
						
					}]
				},			
				relationRisk:{
					total:2226, 
					list:[{
						id:101,
						img:require('@/assets/img/work/custInfo/riskOverview_iconRisk1.png'),
						name:"特大风险",
						riskNum:3,
						labelNum:5,
						labelList:["已退出经营","清算备案","破产清算"],
						color:"#FE6A41 ",
						background:"rgba(254,106,65,0.1)"
						
					},{
						id:102,
						img:require('@/assets/img/work/custInfo/riskOverview_iconRisk2.png'),
						name:"预警风险",
						riskNum:3,
						labelNum:13,
						labelList:["裁判文书","多次开庭","经营异常"],
						color:"#F7B500 ",
						background:"rgba(247,181,0,0.1)"
						
					},{
						id:103,
						img:require('@/assets/img/work/custInfo/riskOverview_iconRisk3.png'),
						name:"关注风险",
						riskNum:3,
						labelNum:27,
						labelList:["裁判文书","多次开庭","经营异常","风险投资"],
						color:"#0080FF",
						background:"rgba(0,128,255,0.1)"
						
					},{
						id:104,
						img:require('@/assets/img/work/custInfo/riskOverview_iconRisk4.png'),
						name:"提示风险",
						riskNum:4,
						labelNum:2364,
						labelList:["裁判文书","多次开庭","经营异常","风险投资"],
						color:"#00C6CC",
						background:"rgba(0,198,204,0.1)"
						
					}]
				}
			
			
			}
		},
		computed: {
			...mapGetters({
				codeCombo: 'getCodeCombo',
				permissionList: 'getPermission',
				userInfo: 'getUserInfo',
			}),
		},
		activated() {

		},
		mounted() {
			this.echertInit();
		},
		created() {
			
		},
		methods: {
			sum (arr) { // 数组求和
			    return eval(arr.join('+'));
			},
			echertInit(){
				let _this = this;
				var chartDom = document.getElementById('mastery');
				var myChart = echarts.init(chartDom);
				let arrlist = [620, 200, 150, 80, 70];
				let proportion = arrlist.map(item => Math.round(parseFloat(item) / parseFloat(this.sum(arrlist)) * 10000) / 100);
				console.log("proportion",proportion)

				var option; 
				option = {
				  color:['#73C4F7','#7BDDD0','#FAC858','#A2DE79','#FF8F8F'],
				  xAxis: {
				    type: 'category',
					axisLabel:{ 
						rotate : 30 
					},
				    data: ['法人风险实体', '股东风险实体', '子公司风险实体', '关联人', '自定义关联企业'],
					
				  },
				  yAxis: { 
					type: 'value',
					name: '单位（%）',
					nameGap: 35,
				  }, 
				  tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}, 
						backgroundColor:"#ffffff",
						//padding:"20",
						textStyle:{ 
							color: '#222222' , 
							fontStyle: 'normal' ,
							fontWeight: 400 , 
							fontSize: 14 ,
							lineHeight: 14 ,
							width: 138 ,
							height: 100 ,
							 
						},
						formatter:function(params){
							console.log(params)
							let  str =
								'<span style="display:inline-block;margin-right:10px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#CCCCCC"></span>' + params[0].name + " : " +   Math.round(_this.sum(arrlist) * params[0].data / 100) + "<br />";
							
							 str += '<span style="display:inline-block;margin-right:10px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#7BDDD0"></span>' + params[0].name + " : " + Math.round(_this.sum(arrlist) * params[0].data / 100) + "<br />";
							 str+="占比" + " : " + "+"+params[0].data+"%";
							
							return str;
						}
				  }, 
				  series: [ 
				    {
				      data: proportion,
				      type: 'bar',
					  barWidth : 24,
					  showBackground: false,
					  backgroundStyle:{
						borderRadius: [4, 4, 0, 0]  
					  },
					 /* label: {
					    show: true,
					    position: 'top'
					  }, */
					  itemStyle: {
							normal: {
				  　　　　　　　　//这里是重点
								color: function(params) {  
									var colorList = ['#73C4F7','#7BDDD0','#FAC858','#A2DE79','#FF8F8F'];
									return colorList[params.dataIndex]
								},
								barBorderRadius: [4, 4, 0, 0], 
							},
							emphasis: {
								label: {
									show: true,
									//label展示的时候再把数值转换回来，不然会展示百分比♥♥♥
									formatter: function(params) {
										console.log("params",params)
										let num = Math.round(_this.sum(arrlist) * params.data / 100);
										return `人数 ${num} 人 \n 占比 ${params.data}%`;
									},
									//一下为label的一些配置项，设置外边框，背景颜色，字体颜色等
									backgroundColor: 'rgba(61,126,255,0.09)',
									borderColor: '#3d7eff',
									borderWidth: 0.5,
									borderRadius: 2,
									padding: 6,
									position: 'top',
									textStyle: {
										color: '#3D7EFF',
										fontSize: 14,
										marginLeft: 0,
										lineHeight: 20
									}
								},
							}
						},
				    }
				  ]
				};
				
				option && myChart.setOption(option);
			}
		},
	}
</script> 
<style lang="scss" scoped>
	.riskOverview {
		max-width: 1200px;
		width: 100%;
		min-height: 700px;
		background-color: #FFFFFF;
		background-image: url('../../../../../assets/img/work/custInfo/riskOverviewBground.png');
		background-size: 100% 100%;

		.content { 
			width: 100%;
			height: calc(100% - 64px);
			box-sizing: border-box; 
			padding: 20px 24px 0px;
			.detail{
				margin-top: 48px;
				width: 100%;
				.relationEntity{
					.mastery{
					  width:350px;
					  height:345px;
					}
					.chartName{ 
						height: 14px;
						font-size: 14px; 
						font-weight: 400;
						color: #222222; 
						margin-bottom: 24px;
					}
					.chartTitle{
						min-height: 40px;
						width: 100%;
						display: flex;
						flex-wrap: wrap; 
						.chartTItem{
							min-width: 40px;
							height: 12px;
							font-size: 12px; 
							font-weight: 400;
							color: #555555; 
							line-height: 12px;
							margin-bottom: 16px;
							display: flex;
							align-items: center;
							margin-right: 24px;
							.dot{
								width: 8px;
								height: 8px;
								background: #73C4F7;
								border-radius: 4px;
								margin-right: 8px;
							}
						}
					}
				}
				.detailItem{
					min-height: 450px; 
					.riskList{ 
						.listLabel{
							min-height: 16px; 
							width: 90%; 
							display: flex;
							flex-wrap:wrap;
							.labelItem{ 
								min-width: 60px;
								height: 20px; 
								border-radius: 2px; 
								font-size: 12px; 
								font-weight: 400; 
								line-height: 20px;
								margin-bottom: 10px;
								margin-right: 10px;
								box-sizing: border-box;
								padding: 0px 6px;
								text-align: center;
							}
							
						}
						.explain{
							width: 100%;
							height: 16px;
							line-height: 16px;
							color: #888888;
							font-size: 12px;
							line-height: 16px; 
							margin-top: 2px;
							margin-bottom: 32px;
							img{
								height: 18px;
								width: 18px; 
								margin-top: -4px;
							}
							.number{
								color: #555555;
								font-size: 16px;
								margin: 0px 3px;
							}
						}
						.listTitle{
							height: 16px;
							width: 100%;
							display: flex;
							align-items: center;
							margin-bottom: 16px;
							img{
								height: 14px;
								width: 14px;
								margin-right: 10px;
							}
							.dot{
								width: 4px;
								height: 4px; 
								margin: 0px 6px;
							}
							.number{ 
								font-size: 16px; 
								font-weight: 500;
								color: #222222;  
								margin-top: 2px;
							}
							.text{ 
								font-size: 14px; 
								font-weight: 400;
								color: #222222; 
							}
						}
					}
					.title{
						height:14px ;
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 24px;
						img{
							width: 20px;
							height: 20px;
							margin-left: 10px;
							margin-right: 4px;
						}
						.blueLine{
							width: 4px;
							height: 14px;
							background: #096DD9;
							border-radius: 2px; 
						}
						.name{ 
							font-size: 14px; 
							font-weight: bold;
							color: #222222; 
							margin-left: 10px;
						}
						span{
							color:#888888 ; 
							.spanBlack{
								color:#555555;
							}
							.spanYellow{
								color:#FA6400;
							}
						}
						
						
					}
				}
			}
			.riskSignal {
				height: 68px;
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;

				.right {
					height: 68px;
					flex: 1;
					box-sizing: border-box;
					padding-left: 24px;
					display: flex;
					align-items: center;
					color: #888888;
					font-size: 14px;
					line-height: 20px;

					.span {
						color: #FA6400;
					}
				}

				.left {
					margin-left: 14px;
					width: 240px;
					height: 68px;
					background: #03C6CC;
					border-radius: 42px;
					padding-left: 50px;
					box-sizing: border-box;
					position: relative;

					.img {
						position: absolute;
						left: -14px;
						top: 14px;
					}

					.self {
						margin-top: 11px;
						display: flex;
						align-items: center;
						height: 18px;
						font-size: 18px;
						font-weight: 500;
						color: #FFFFFF;

						.text {
							font-weight: 400;
							font-size: 14px;
						}

						.number {
							margin-left: 6px;
						}
					}

					.time {
						height: 14px;
						font-size: 14px;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 10px;

						.number {
							margin-left: 6px;
						}
					}
				}
			}
		}

	}
</style>
